<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" ref="listQuery" :model="listQuery" class="demo-form-inline">
        <el-form-item>
          <el-button v-waves type="success" icon="Search" @click="handleFilter">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="input1"
            class="w-50 m-2"
            placeholder="点击查询"
            suffix-icon="Search"
            readonly
            @click="searchBtn"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="el-divider--horizontal-margin" />
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      show-summary
      highlight-current-row
      tooltip-effect="dark"
      style="width: 100%;"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column align="center" type="index" label="序号" width="60px" />
      <el-table-column align="center" label="部门" prop="a1" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="指标" prop="a2" width="600px" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="经济分类" width="300px" prop="a3" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="经济分类预算金额" prop="a4" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="期初金额" prop="a5" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="本期支出" prop="a6"  sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="总支出" prop="a66" sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="可用金额" prop="a7"  sortable show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="执行率" prop="a8" sortable show-overflow-tooltip></el-table-column>
    </el-table>
    <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" />
    <el-dialog v-model="dialogVisible" :title="dialogTypeTitle" width="700px" align-center>
      <el-form class="my-form" ref="obj" :model="obj" :rules="rules" label-position="right" :disabled="dialogType === 'view'" label-width="auto">
        <el-form-item label="预算指标" prop="code">
          <el-input v-model="obj.id" placeholder="点击查询" suffix-icon="Search" />
        </el-form-item>
        <el-form-item label="开始日期" prop="name">
          <el-input v-model="obj.name" placeholder="请输入往来单位名称" />
        </el-form-item>
        <el-form-item label="结束日期" prop="engineeringSubjectsCode">
          <el-input v-model="obj.engineeringSubjectsCode"  placeholder="请输入结束日期" />
        </el-form-item>
        <el-form-item label="开始部门" prop="engineeringSubjectsName">
          <el-input v-model="obj.engineeringSubjectsName" placeholder="开始部门" />
        </el-form-item>
        <el-form-item label="结束部门">
          <el-input v-model="obj.createTime" placeholder="自动生结束部门成" />
        </el-form-item>
        <el-form-item label="是否包含子指标">
          <el-radio-group v-model="obj.updateTime">
            <el-radio label="是" border></el-radio>
            <el-radio label="否" border></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否只显示末级部门">
          <el-radio-group v-model="obj.updateTime">
            <el-radio label="是" border></el-radio>
            <el-radio label="否" border></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否只显示末级指标">
          <el-radio-group v-model="obj.updateTime">
            <el-radio label="是" border></el-radio>
            <el-radio label="否" border></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button v-show="dialogType !== 'view'" type="primary" @click="doConfirm('obj')">查询</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {doGet, doPost, doPut, doDelete, doDownload} from '@/config/http'
import baseConfig from '@/mixins/baseConfig'
import {alertErrorMsg, customValidator, notifySuccess} from "@/config/common";

const emptyObj = {
  code: '',
  name: '',
  registrationName: '',
  department: '',
  time: '',
  isConstruction: '',
  identifying: '',
  examineName: '',
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null
}

export default {
  name: 'Kpi',
  mixins: [baseConfig],
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      dialogVisible: false,
      dialogType: 'add',
      dialogTypeTitle: '查询',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableKey: 0,
      checkList: [],
      input1: '',
      list: [
          {
            a1: '[003]维管中心', // 部门
            a2: '12021 538003 2080502 9992000000025 3030912021 维管中心 其他离退休人员经费 事业单位离退休 奖励金', // 指标
            a3: '[30309]奖励金', // 经济分类
            a4: '3600.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '3020.00', // 本期支出
            a66: '3020.00', // 总支出
            a7: '580.00', // 可用金额
            a8: '84%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '[2021 538003 2080502 9992000000026 303022021 维管中心住房改革贴(离退休)_事业单位离退休 退休费', // 指标
            a3: '[30302]退休费', // 经济分类
            a4: '87792.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '83796.00', // 本期支出
            a66: '83796.00', // 总支出
            a7: '3996.00', // 可用金额
            a8: '95%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '(2021 538003 2080502 9992000000027 303022021 维管中心 机关事业单位离退休人员慰问金 事业单位离退休 退休费', // 指标
            a3: '[30302]退休费', // 经济分类
            a4: '10330.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '10330.00', // 本期支出
            a66: '10330.00', // 总支出
            a7: '0.00', // 可用金额
            a8: '100%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '12021 538003 2080505 9992000000004 3010812021 维管中心 机关事业单位基本养老保险费 机关事业单位基本养老保险费支出 机', // 指标
            a3: '[30108]机关事业单位基本养老保', // 经济分类
            a4: '263672.56', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '0.00', // 本期支出
            a66: '0.00', // 总支出
            a7: '263672.56', // 可用金额
            a8: '0%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '12021 538003 2080502 9992000000025 3030912021 维管中心 其他离退休人员经费 事业单位离退休 奖励金', // 指标
            a3: '[30309]奖励金', // 经济分类
            a4: '3600.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '3020.00', // 本期支出
            a66: '3020.00', // 总支出
            a7: '580.00', // 可用金额
            a8: '84%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '[2021 538003 2080502 9992000000026 303022021 维管中心住房改革贴(离退休)_事业单位离退休 退休费', // 指标
            a3: '[30302]退休费', // 经济分类
            a4: '87792.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '83796.00', // 本期支出
            a66: '83796.00', // 总支出
            a7: '3996.00', // 可用金额
            a8: '95%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '(2021 538003 2080502 9992000000027 303022021 维管中心 机关事业单位离退休人员慰问金 事业单位离退休 退休费', // 指标
            a3: '[30302]退休费', // 经济分类
            a4: '10330.00', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '10330.00', // 本期支出
            a66: '10330.00', // 总支出
            a7: '0.00', // 可用金额
            a8: '100%', // 执行率
          },
          {
            a1: '[003]维管中心', // 部门
            a2: '12021 538003 2080505 9992000000004 3010812021 维管中心 机关事业单位基本养老保险费 机关事业单位基本养老保险费支出 机', // 指标
            a3: '[30108]机关事业单位基本养老保', // 经济分类
            a4: '263672.56', // 经济分类预算金额
            a5: '0.00', // 期初金额
            a6: '0.00', // 本期支出
            a66: '0.00', // 总支出
            a7: '263672.56', // 可用金额
            a8: '0%', // 执行率
          },
        ],
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        sortField: 'id',
        sortType: 'desc',
        level: null,
        code: null,
        name: null,
        weight: null,
        parentId: null,
        state: null,
        createTimeStart: null,
        createTimeEnd: null,
        updateTimeStart: null,
        updateTimeEnd: null,
      },
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        level: [{ required: false, validator: customValidator, min: 0, max: 100, label: '指标级别', trigger: ['blur', 'change'] }],
        code: [{ required: false, validator: customValidator, min: 0, max: 50, label: '指标编号', trigger: ['blur', 'change'] }],
        name: [{ required: false, validator: customValidator, min: 0, max: 200, label: '指标名称', trigger: ['blur', 'change'] }],
        weight: [{ required: false, validator: customValidator, min: 0, max: 3, label: '优先级权重', trigger: ['blur', 'change'] }],
        parentId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '上级指标ID', trigger: ['blur', 'change'] }],
        state: [{ required: false, validator: customValidator, min: 0, max: 20, label: '状态', trigger: ['blur', 'change'] }],
      },
      kpiList: [],
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {

    },
    handleResetQuery() {
      this.resetForm("listQuery")
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleSelectionChange(data) {
      this.selectionList = data
    },
    handleSortChange(data) {
      const { prop, order } = data
      this.listQuery.sortField = prop
      this.listQuery.sortType = order === 'ascending' ? 'asc' : 'desc'
      this.handleFilter()
    },
    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTypeTitle = '编辑'
      this.dialogVisible = true
      this.checkStrictly = true
      this.obj = Object.assign({}, row)
    },
    handleView(row) {
      this.dialogType = 'view'
      this.dialogTypeTitle = '详情'
      this.dialogVisible = true
      this.checkStrictly = false
      this.obj = Object.assign({}, row)
    },
    handleAdd() {
      console.log('111111111111')
      this.goTargetByName('paymentContractEdit')
    },
    handleExport() {
      doDownload(this.svc, '/kpi/export', this.listQuery)
    },
    handleDelete(row) {
      this.$confirm('您确定删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        doDelete(this.svc, '/kpi/' + row.id, {}).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      }).catch(e => {
        console.error(e)
      })
    },
    async doConfirm(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      if (this.dialogType === 'edit') {
        doPut(this.svc, '/kpi/modify', this.obj).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      } else if (this.dialogType === 'add') {
        doPost(this.svc, '/kpi/add', this.obj).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      }
    },
    tableRowClassName(row,rowIndex) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    searchBtn() {
      this.dialogVisible = true
    }
  }
}
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: #E6A23C;
}
.el-table .success-row {
  --el-table-tr-bg-color: #E6A23C;
}
</style>
